<template>
    <table class="freeTable" :style="styleObject" v-if="s_showByRow" :texttext-align="textAddress">
    <tr v-for="index in rowCount" >
      <td width="30%" height="30px">{{tableData[index-1].key}}</td>
      <td >{{tableData[index-1].value}}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {},
      s_showByRow: true,
      textAddress:'',
    };
  },
  props: ['tableData', 'tableStyle', 'showByRow','textaddress'],
  computed: {
    rowCount: function() {
      return Math.ceil(this.tableData.length);
    }
  },
  created() {
    this.textAddress=this.textaddress;
    this.styleObject = this.tableStyle;
    if(this.showByRow !== undefined){
      this.s_showByRow = this.showByRow;
    }
  },
}
</script>

<style>
.freeTable{
    border: 0px solid black;
    border-collapse:collapse;        /*为表格设置合并边框模型 */
    /*cellpadding:0;
    cellspacing:0;    */
    font-size:14px;
    text-align: center;
    background-color: black;
}
td{                          /*td和tr是不可以加点的，因为不是类是标签*/
    border: 1px solid #CFCFCF;
    background-color: #fff;
}

/*.styleObject{
    border: 2px solid #F00;
}
.tableStyle{
    border: 2px solid #F00;
}*/

</style>
